import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
     // 定义一个name，以供全局使用
     name: '张三',
     // 定义一个number，以供全局使用
     number: 0,
     // 定义一个list，以供全局使用
     list: [
         { id: 1, name: '111' },
         { id: 2, name: '222' },
         { id: 3, name: '333' },
     ],
     age:13,
  },
  // 修饰器  相当于对state中的数据进行了加工处理并且返回了新的字符
  getters:{
    getMessage(state){
      return `hello${state.name}`;
    }
  },
  // 修改值
  mutations: {
    // setNumber(state){
    //   state.number = 5;
    // }
    setNumber(state,payload){ // 增加一个mutations的方法，方法的作用是让num从0变成5，state是必须默认参数
      state.number = payload.number;
    },
    setAge(state,payload){
      state.age = payload.age
    }
  },
  actions: {
    // Actions存在的意义是假设你在修改state的时候有异步操作，vuex作者不希
    // 望你将异步操作放在Mutations中，所以就给你设置了一个区域，让你放异步
    // 操作，这就是Actions
    setAge(content,payload){ // 增加setNum方法，默认第一个参数是content，其值是复制的一份store
       return new Promise (res=>{
         setTimeout(()=>{
           content.commit('setAge',{age:payload.age});
           res();
         },1000)
       })
    }
  },
  modules: {
  }
})
